<template>
  <div>
    <el-form :inline="true" v-show="isSearchCollapse" class="query-form" ref="searchForm" :model="searchForm"
      @keyup.enter.native="refreshList()" @submit.native.prevent>
      <!-- 搜索框-->
      
      <el-form-item prop="createDate">
        <el-date-picker v-model="searchForm.createDate" type="month" size="small"   value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button-group class="pull-right">
        <el-button type="default" size="small" icon="el-icon-search" @click="
            (isSearchCollapse = !isSearchCollapse), (isImportCollapse = false)
          ">
        </el-button>
   
        <el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
        </el-button>
      </el-button-group>
    </el-row>
    <el-table :data="dataList" border size="medium" @selection-change="selectionChangeHandle"
      @sort-change="sortChangeHandle" v-loading="loading" class="table">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="image" show-overflow-tooltip label="头像">
        <template slot-scope="scope" v-if="scope.row.image">
          <el-image
            style="height: 50px; width: 50px; margin-right: 10px"
            @click="showImg(scope.row.image)"
            :src="scope.row.image"
            :preview-src-list="scope.row.image"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="nike_name" show-overflow-tooltip label="用户">
        <template slot-scope="scope">
          <span v-if="!nike_name">{{ scope.row.nike_name }}</span>
          <span v-if="nike_name">未命名用户</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" show-overflow-tooltip label="手机号">
      </el-table-column>
      <el-table-column prop="num" show-overflow-tooltip label="数量">
      </el-table-column>
     
       
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchForm: {
          createDate: "",
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: "",
        dataListSelections: [],
        isSearchCollapse: false,
        isImportCollapse: false,
        loading: false,
      };
    },
    components: { 
    },
    activated() {
      // this.searchForm.auditStatus = this.$route.query.auditStatus
      this.refreshList();
    },

    methods: {
      // 获取数据列表
      refreshList() {
        this.loading = true;
        this.$http({
          url: "/mob/home/getSharedRanking",
          method: "get",
          params: {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            orderBy: this.orderBy, 
            createDate:this.searchForm.createDate,
            id:''
          },
        }).then(({ data }) => {
          if (data && data.success) {
            this.dataList = data.list;
            this.total = data.count;
            this.loading = false;
          }
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageNo = 1;
        this.refreshList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageNo = val;
        this.refreshList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },

      // 排序
      sortChangeHandle(obj) {
        if (obj.order === "ascending") {
          this.orderBy = obj.prop + " asc";
        } else if (obj.order === "descending") {
          this.orderBy = obj.prop + " desc";
        } else {
          this.orderBy = "";
        }
        this.refreshList();
      },
      
    },
  };
</script>